<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #createCode {
            user-select: none;
        }

        .right {
            color: green;
            font-size: 12px;
        }

        .error {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!-- -->
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <!-- <p>
            <label for="">确&emsp;认:</label>
            <input type="text" class="repwd">
            <span class="repwd_span"></span>
        </p> -->
        <p>
            <label for="">手机号:</label>
            <input type="text" class="phone">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" class="email">
            <span class="email_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </div>
</body>
<script>
    // 1.  验证 用户名 密码 手机号 邮箱   => 失焦时验证
    // 用户名 => 整体
    //          拆开写     1. 6-12位  2. 以非数字开头   3. 由数字 字母 下划线 $组成
    // 2.  用户名 密码 手机号 邮箱  => 全都成功 => 点击注册 才能提交(alert("可以注册"))

    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];

    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phone_span")[0];

    var emailInp = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("email_span")[0];

    var btn = document.getElementsByClassName("btn")[0];

    // 一步到位
    // userInp.onblur = function(){
    //     var user = userInp.value.trim();
    //     var reg = /^[a-zA-Z_$][\w$]{5,11}$/;

    //     if(reg.test(user)){
    //         userSpan.textContent = "√";
    //         userSpan.style.color = "green";
    //         userSpan.style.fontSize = "12px";
    //     }else{
    //         userSpan.textContent = "用户名用仅支持字母、数字、下划线和$,6-12位,且不能为纯数字";
    //         userSpan.style.color = "red";
    //         userSpan.style.fontSize = "12px";
    //     }
    // }


    // userInp.onblur = function(){
    //     var user = userInp.value.trim();
    //     var reg = /^[a-zA-Z_$][\w$]{5,11}$/;

    //     if(reg.test(user)){
    //         userSpan.textContent = "√";
    //         // userSpan.classList.remove("error");
    //         // userSpan.classList.add("right");

    //         userSpan.className = "user_span right";
    //     }else{
    //         userSpan.textContent = "用户名仅支持字母、数字、下划线和$,6-12位,且不能为纯数字";
    //         // userSpan.classList.remove("right");
    //         // userSpan.classList.add("error");
    //         userSpan.className = "user_span error";
    //     }
    // }


    // 拆分判断
    // userSpan.className = "user_span right";

    // userInp.onblur = function(){
    //     var user = userInp.value.trim();
    //     var lenReg = /^\S{6,12}$/;  //任意字符6-12
    //     var startReg = /^[^0-9]/; // 非数字开头
    //     var combReg = /^[\w$]{6,12}$/  // 合法组成

    //     if(lenReg.test(user)){
    //         if(startReg.test(user)){
    //             if(combReg.test(user)){
    //                 userSpan.textContent = "√";
    //                 userSpan.className = "user_span right";
    //             }else{
    //                 userSpan.textContent = "用户名仅支持字母、数字、下划线和$";
    //                 userSpan.className = "user_span error";
    //             }
    //         }else{
    //             userSpan.textContent = "用户名不能以数字开头";
    //             userSpan.className = "user_span error";
    //         }
    //     }else{
    //         userSpan.textContent = "用户名需要在6-12位之间";
    //         userSpan.className = "user_span error";
    //     }

    // }


    userInp.onblur = function () {
        var user = userInp.value.trim();
        var lenReg = /^\S{6,12}$/;  //任意字符6-12
        var startReg = /^[^0-9]/; // 非数字开头
        var combReg = /^[\w$]{6,12}$/  // 合法组成

        if (!lenReg.test(user)) {  // 长度不符合规则  !lenReg.test(user) ==true  =>  lenReg.test(user)==false
            userSpan.textContent = "用户名需要在6-12位之间";
            userSpan.className = "user_span error";
        } else if (!startReg.test(user)) { // 开头不符合规则
            userSpan.textContent = "用户名不能以数字开头";
            userSpan.className = "user_span error";
        } else if (!combReg.test(user)) {  // 组成不符合规则
            userSpan.textContent = "用户名仅支持字母、数字、下划线和$";
            userSpan.className = "user_span error";
        } else {
            userSpan.textContent = "√";
            userSpan.className = "user_span right";
        }

    }



</script>

</html>